<template>
  <div class="consume-record container">
    <navbar>
      签到领取记录
      <div slot="right">
        <DatePicker
          v-model="query.signInTime"
          type="date"
          style="width: 220px"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          clearable
        >
        </DatePicker>
        <Button type="primary" class="ml-10" @click="handleSearch">查询</Button>
      </div>
    </navbar>
    <div class="consume-list mt-25">
      <Table :data="list"
             stripe
             :columns="columns"
             :loading="loading"
             size="small"
             height="560"
             :border="false">
        <template slot="gift" slot-scope="{ row }" class="row">
          <div class="pt-5 pb-5">
            <span v-if="!row.signGift || row.signGift.length == 0">无</span>
            <div v-for="i in row.signGift">{{giftType[i.type]}}：{{i.name}}</div>
          </div>
        </template>
      </Table>
      <div class="lists-page tc mt-20" v-if="total">
        <Page :total="total"
              :current.sync="query.pageNum"
              :page-size="query.pageSize"
              @on-change="getList"/>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {signRecordList} from "@/api/signIn";
import {dateFormat} from "@/common/utils";

export default {
  name: "index",
  data() {
    return {
      typeOptions: {
        1: '签到',
        2: '补签',
        3: '累计签到'
      },
      giftType: {
        1: '饮品券',
        2: '充送券',
        3: '网费',
        4: '包时卡'
      },
      loading: false,
      columns: [
        {title: '门店', key: 'shopName', tooltip: true},
        {title: '天数', key: 'days', render: (h, params) => {
            return h('div', `${params.row.days}天`)
        }},
        {title: '签到奖励', key: 'signGift', slot: 'gift', minWidth: 300},
        {title: '领取类型', key: 'typeLabel'},
        {title: '领取时间', key: 'signInTime'},
      ],
      list: [],
      query: {
        pageNum: 1,
        pageSize: 20
      },
      finish: false,
      total: 0
    }
  },
  computed: {
    ...mapGetters(['memberId']),
  },
  methods: {
    handleSearch() {
      this.query.pageNum = 1
      this.getList()
    },
    getList() {
      this.query.lgUserId = this.memberId
      this.loading = true
      this.query.signInTime = this.query.signInTime ? dateFormat(this.query.signInTime, 'yyyy-MM-dd') : ''
      signRecordList(this.query).then(res => {
        this.list = res.rows.map(item => {
          item.typeLabel = this.typeOptions[item.type]
          if (item.signGift) {
            item.signGift = JSON.parse(item.signGift)
            item.signGift.map(gift => {
              if (gift.type == 3) {
                gift.name = gift.presenterMoney+'元网费'
              }
            })
          }
          return item
        })
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style  lang="scss">
.consume-record {
  padding: 26px 20px;
}
</style>
